<!DOCTYPE html>
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://code.jquery.com/jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
	.shade {
		position: absolute;
		display: none;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.55);
	}

	.shade div {
		width: 300px;
		height: 200px;
		line-height: 200px;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-top: -100px;
		margin-left: -150px;
		background: white;
		border-radius: 5px;
		text-align: center;
	}

	.a-upload {
		padding: 4px 10px;
		height: 20px;
		line-height: 20px;
		position: relative;
		cursor: pointer;
		color: #888;
		background: #fafafa;
		border: 1px solid #ddd;
		border-radius: 4px;
		overflow: hidden;
		display: inline-block;
		*display: inline;
		*zoom: 1
	}

	.a-upload input {
		position: absolute;
		font-size: 100px;
		right: 0;
		top: 0;
		opacity: 0;
		filter: alpha(opacity=0);
		cursor: pointer
	}

	.a-upload:hover {
		color: #444;
		background: #eee;
		border-color: #ccc;
		text-decoration: none
	}
	.img_div{min-height: 100px; min-width: 100px;}
	.isImg{width: 120px; height: 120px; position: relative; float: left; margin-left: 10px;}
	.removeBtn{position: absolute; top: 0; right: 0; z-index: 11; border: 0px; border-radius: 50px; background: red; width: 22px; height: 22px; color: white;}
	.shadeImg{position: absolute;
		display: none;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 15;
		text-align: center;
		background: rgba(0, 0, 0, 0.55);}
	.showImg{width: 400px; height: 500px; margin-top: 140px;}

</style>
<script type="text/javascript">
	$(function() {
		var objUrl;
		var img_html;
		$("#myFile").change(function() {
			var img_div = $(".img_div");
			var filepath = $("input[name='myFile']").val();
			for(var i = 0; i < this.files.length; i++) {
				objUrl = getObjectURL(this.files[i]);
				var extStart = filepath.lastIndexOf(".");
				var ext = filepath.substring(extStart, filepath.length).toUpperCase();
				/*
				 作者：z@qq.com
				时间：2016-12-10
				描述：鉴定每个图片上传尾椎限制
				* */
				if(ext != ".BMP" && ext != ".PNG" && ext != ".GIF" && ext != ".JPG" && ext != ".JPEG") {
					$(".shade").fadeIn(500);
					$(".text_span").text("图片限于bmp,png,gif,jpeg,jpg格式");
					this.value = "";
					$(".img_div").html("");
					return false;
				} else {
					/*
					 若规则全部通过则在此提交url到后台数据库
					 * */
					img_html = "<div class='isImg'><img src='" + objUrl + "' onclick='javascript:lookBigImg(this)' style='height: 100%; width: 100%;' /><button class='removeBtn' onclick='javascript:removeImg(this)'>x</button></div>";
					img_div.append(img_html);
				}
			}
			/*
			 作者：z@qq.com
			时间：2016-12-10
			描述：鉴定每个图片大小总和
			* */
			var file_size = 0;
			var all_size = 0;
			for(j = 0; j < this.files.length; j++) {
				file_size = this.files[j].size;
				all_size = all_size + this.files[j].size;
				var size = all_size / 1024;
				if(size > 500) {
					$(".shade").fadeIn(500);
					$(".text_span").text("上传的图片大小不能超过100k！");
					this.value = "";
					$(".img_div").html("");
					return false;
				}
			}
			/*
			 作者：z@qq.com
			时间：2016-12-10
			描述：鉴定每个图片宽高 以后会做优化 多个图片的宽高 暂时隐藏掉 想看效果可以取消注释就行
			* */
			//					var img = new Image();
			//					img.src = objUrl;
			//					img.onload = function() {
			//						if (img.width > 100 && img.height > 100) {
			//							alert("图片宽高不能大于一百");
			//							$("#myFile").val("");
			//							$(".img_div").html("");
			//							return false;
			//						}
			//					}
			return true;
		});
		/*
		 作者：z@qq.com
		时间：2016-12-10
		描述：鉴定每个浏览器上传图片url 目前没有合并到Ie
		 * */
		function getObjectURL(file) {
			var url = null;
			if(window.createObjectURL != undefined) { // basic
				url = window.createObjectURL(file);
			} else if(window.URL != undefined) { // mozilla(firefox)
				url = window.URL.createObjectURL(file);
			} else if(window.webkitURL != undefined) { // webkit or chrome
				url = window.webkitURL.createObjectURL(file);
			}
			//console.log(url);
			return url;
		}
	});
	/*
	 作者：z@qq.com
	 时间：2016-12-10
	  描述：上传图片附带删除 再次地方可以加上一个ajax进行提交到后台进行删除
	 * */
	function removeImg(r){
		$(r).parent().remove();
	}
	/*
	 作者：z@qq.com
	 时间：2016-12-10
	  描述：上传图片附带放大查看处理
	 * */
	function lookBigImg(b){
		$(".shadeImg").fadeIn(500);
		$(".showImg").attr("src",$(b).attr("src"))
	}
	/*
	 作者：z@qq.com
	 时间：2016-12-10
	  描述：关闭弹出层
	 * */
	function closeShade(){
		$(".shade").fadeOut(500);
	}
	/*
	 作者：z@qq.com
	 时间：2016-12-10
	  描述：关闭弹出层
	 * */
	function closeShadeImg(){
		$(".shadeImg").fadeOut(500);
	}
</script>
<title>jQuery多图上传预览代码</title>
</head>

<body>
<center>
        <form action="" method="post" enctype="multipart/form-data">
        {% csrf_token %}
<div class="img_div">
</div>
<a href="javascript:;" class="a-upload">
	<input type="file" name="myFile" id="myFile" multiple="multiple" />选择图片
</a>
<div class="shade" onclick="javascript:closeShade()">
	<div class="">
		<span class="text_span">

		</span>
	</div>
</div>

<div class="shadeImg" onclick="javascript:closeShadeImg()">
	<div class="">
		<img class="showImg" src="">
	</div>
</div>
</center>

        <input type="submit" value="上传">
    </form>
</body>
</html>
